<template>
  <div class="at-card" :style="style">
    <div class="at-card-header">
      <div class="at-card-title" v-if="$slots.title">
        <slot name="title"></slot>
      </div>
      <div class="at-card-title" v-else>{{ title }}</div>
    </div>

    <!-- <div class="at-card-header" v-else-if="title">
      <div class="at-card-title">{{ title }}</div>
    </div> -->
    <div class="at-card-body">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  title: String,
  padding: { type: Number, default: 0 },
})

const style = computed(() => {
  const style = {}

  if (props.padding) style.padding = `${props.padding}px`

  return style
})
</script>
<style lang="scss" scoped>
.at-card {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #ebeef5;
  background-color: #fff;
  border-radius: 4px;
}

.at-card-header {
  padding: 10px 15px;
}
.at-card-body {
  padding: 15px;
}
</style>
